<template>
  <div class="box" v-focus>
    <selectInput :placeholder="placeholder" :value="value" @search="search" />
    <Menu :data="data" @choose="choose" :searchValue="searchValue"></Menu>
  </div>
</template>

<script>
import selectInput from './selectInput.vue'
import Menu from './menu.vue'
import focus from '../../directives/focus'
import { ref } from '@vue/reactivity'
export default {
  name: 'selector',
  components: {
    selectInput,
    Menu,
  },
  directives: {
    focus,
  },
  props: {
    placeholder: {
      type: String,
      default: '请选择',
    },
    data: {
      type: Array,
      default: [],
    },
  },
  setup(props, ctx) {
    const value = ref('')
    const searchValue = ref('')
    const choose = (item) => {
      value.value = item.text
      ctx.emit('choose', item)
    }

    const search = (value) => {
      searchValue.value = value
    }

    return {
      choose,
      value,
      search,
      searchValue,
    }
  },
}
</script>

<style scope>
.box {
  position: relative;
}
</style>
